<template>
	<view class="outer">
		<view class="nav">
			<view class="nav_left">
				<view v-for="item in px_data">
					<text v-if="now_px==item" class="red" @click="change(item)">{{item}}</text>
					<text v-else @click="change(item)">{{item}}</text>
				</view>
			</view>
			<view class="nav_right">筛选</view>
		</view>
		<view class="content" v-for="item in sp_data" :key="item.id">
			<view>
				<!-- <image src="../../static/collection-image/冲锋衣.jpeg" mode="" class="ad_img"></image> -->
				<image :src="item.img" mode="" class="ad_img"></image>
			</view>
			<view>{{item.name}}</view>
			<view>{{item.yh}}</view>
			<view>&yen; {{item.num}}</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {	
			return {
				sp_data:[{
					id:'1',
					img:'../../static/collection-image/冲锋衣.jpeg',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				},{
					id:'2',
					img:'../../static/person_image/黄宗泽.png',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				},{
					id:'3',
					img:'../../static/person_image/黄宗泽.png',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				},{
					id:'4',
					img:'../../static/collection-image/冲锋衣.jpeg',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				}],
				px_data:['综合','销量','价格'],
				now_px:''
			}
		},
		onShow(){
			this.change('综合');
			console.log('已触发onShow');	
		},
		methods: {
			change(v){
				this.now_px=v;
			}
		}
	}
	
</script>

<style lang="less" scoped>
	.outer{
		margin-top: 5rpx;
		border-top: 1px solid #DBDBDB;
		display:flex;
		flex-wrap:wrap;
		.nav{
			width: 750rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #DBDBDB;
			display:flex;
			justify-content:space-between;
			.nav_left{
				display:flex;
				>view{
					margin: 0 50rpx;
				}
				.red{
					color: #FF0000;
				}
			}
			
		}
		.content{
			display:flex;
			flex-direction:column;
			align-items:center;
			width: 375rpx;
			margin-bottom: 30rpx;
			>view {
				width: 300rpx;
				padding: 15rpx 15rpx 0 15rpx;
				background-color: #fafafafa;
				font-size: 32rpx;
			}
			.ad_img{
				height: 280rpx;
				width: 300rpx;
				background-color: #F2F2F2;
			}
			view:nth-of-type(3){
				color: #FE1D22;
			}
			view:nth-of-type(4){
				color: #E04F06;
				font-size: 40rpx;
			}
		}
	}
</style>
